<template>
  <div>
    <!-- 遍历数组(重要)  v-for="item in 数组名" 
                  v-for="(item,index) in 数组名"
         遍历对象(了解)
            v-for="(value,key) in 对象名"
         遍历数字
            v-for="item in 数字"
    -->
    <h3>v-for的使用</h3>
    <!-- item和index(是变量名,可以随便定义) 就是数组遍历的每一项 -->
    <!-- (第一个参数名: 代表的是数组每一项,第二个参数名: 代表的是数组下标) -->
    <ul>
      <li v-for="item in arr" :key="item">{{ item }}</li>
    </ul>
    <hr>
    <div v-for="(item, index) in arr" :key="item">{{ item  }}-- {{index}}</div>
    <hr>
    <!-- 了解即可 -->
    <p v-for="(value, key) in user" :key="value">{{value}} --- {{key}}</p>
    <p v-for="item in 10" :key="item">{{item}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ['苹果', '桃子', '榴莲', '葡萄'],
      user: {
        name: '小花',
        age: 18,
        hobby: '老爷们'
      }
    }
  }
}
</script>

<style>

</style>